<template>
  <div class="leftBoard">
    <el-text class="mx-1" size="large">内容概要</el-text>
    <div>
      <el-input
        v-model="contentSummary"
        :rows="15"
        type="textarea"
        placeholder="今日详细计划大纲"
        input-style="width: 100%;"
        @change="insertEveryDayInfo(1)"
      />
    </div>
    <el-text class="mx-1" size="large">遗留问题总览</el-text>
    <div>
      <el-input
        v-model="remainingProblems"
        :rows="15"
        type="textarea"
        placeholder="遗留问题"
        input-style="width: 100%;"
        @change="insertEveryDayInfo(2)"
      />
    </div>
  </div>
  <div class="rightBoard">
    <el-button type="primary" style="margin-left: 16px" @click="drawer = true">
      临时记
    </el-button>
    <el-drawer v-model="drawer" title="临时记" :with-header="false">
      <el-input
        v-model="temporaryRecord"
        type="textarea"
        placeholder="可以复制和粘贴"
        input-style="width: 100%;height:100%"
      />
    </el-drawer>
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted } from 'vue'
import { insertEveryDay, getEveryDay } from '@/api/calendar'

var contentSummary = ref('')
var remainingProblems = ref('')
var temporaryRecord = ref('')
const drawer = ref(false)

// 初始化查询
onMounted(() => {
  getEveryDay().then((res) => {
    if (res.data) {
      contentSummary.value = res.data.contentSummary
      remainingProblems.value = res.data.remainingProblems
    }
  })
})

const insertEveryDayInfo = (type: number) => {
  insertEveryDay({
    contentSummary: contentSummary.value,
    remainingProblems: remainingProblems.value,
    saveTime: new Date(),
    contentType: type,
  }).then((res) => {
    if (res.data) {
      console.log('保存成功')
    }
  })
}
</script>

<style lang="scss" scoped>
.leftBoard {
  width: 50%;
  height: 100%;
  float: left;
  border-right: 1px solid #ccc;
  padding: 10px;
}
</style>
